<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../dist/layui.css">
    <!--<link rel="stylesheet" href="../src-new/style-form.css">-->
    <style>
        body{
            padding: 20px 200px;
        }
    </style>
</head>
<body>

<form class="form-horizontal layui-form">
    <div class="form-group form-group-sm has-success has-feedback">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            <span class="icon-check form-control-feedback" aria-hidden="true"></span>
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
    </div>
    <div class="form-group">
        <div class="offset-sm-2 col-sm-10">
            <button type="submit" class="btn btn-primary btn-sm">Sign in</button>
        </div>
    </div>

    <div class="form-group has-success has-feedback">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <div class="input-group">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                <a href="javascript:;" class="btn input-group-addon"><i class="icon-plus"></i></a>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <p class="form-control-static">email@example.com</p>
        </div>
    </div>
    <div class="form-group form-group-lg has-warning has-feedback">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <div class="input-group">
                <a href="javascript:;" class="btn input-group-addon">.00</a>
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
            <span class="icon-alert-triangle form-control-feedback" aria-hidden="true"></span>
            <span id="helpBlock3" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
    </div>
    <div class="form-group has-error has-feedback">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <div class="input-group">
                <a href="javascript:;" class="btn input-group-addon">.00</a>
                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
            </div>
            <span id="helpBlock4" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
            <span class="icon-alert-triangle form-control-feedback" aria-hidden="true"></span>
        </div>
    </div>
    <div class="form-group has-success">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="form-group has-warning">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <div class="input-group">
                <select name="quiz" lay-filter="quiz">
                    <option value="">请选择问题</option>
                    <optgroup label="城市记忆">
                        <option value="0">你工作的第一个城市</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="1" disabled="">你的工号</option>
                        <option value="2">你最喜欢的老师</option>
                    </optgroup>
                    <optgroup label="城市记忆">
                        <option value="0">你工作的第一个城市</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="1" disabled="">你的工号</option>
                        <option value="2">你最喜欢的老师</option>
                    </optgroup>
                    <optgroup label="城市记忆">
                        <option value="0">你工作的第一个城市</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="1" disabled="">你的工号</option>
                        <option value="2">你最喜欢的老师</option>
                    </optgroup>
                </select>
                <a href="javascript:;" class="btn input-group-addon">.00</a>
            </div>
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <div class="input-group">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option value="1">layer</option>
                    <option value="2">form</option>
                    <option value="3">layim</option>
                    <option value="4">element</option>
                    <option value="5">laytpl</option>
                    <option value="6">upload</option>
                    <option value="7">laydate</option>
                    <option value="8">laypage</option>
                    <option value="9">flow</option>
                    <option value="10">util</option>
                    <option value="11">code</option>
                    <option value="12">tree</option>
                    <option value="13">layedit</option>
                    <option value="14">nav</option>
                    <option value="15">tab</option>
                    <option value="16">table</option>
                    <option value="17">select</option>
                    <option value="18">checkbox</option>
                    <option value="19">switch</option>
                    <option value="20">radio</option>
                </select>
                <a href="javascript:;" class="btn input-group-addon">.00</a>
            </div>
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="checkbox" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读">
            <input type="checkbox" name="like[game]" title="游戏" disabled>
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
            <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
            <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="checkbox" name="close" lay-skin="switch" title="开关">
            <input type="checkbox" name="close" checked lay-skin="switch" title="开关">
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="checkbox" name="close" lay-skin="switch" title="开关">
            <input type="checkbox" name="close" checked lay-skin="switch" title="开关">
        </div>
    </div>

    <div class="form-group has-error">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="radio" name="sex.id" value="男" title="男">
            <input type="radio" name="sex.id" value="女" title="女" checked>
            <input type="radio" name="sex.id" value="中型" title="中">
        </div>
    </div>

    <div class="form-group">
        <div class="offset-sm-2 col-sm-10">
            <input type="checkbox" lay-skin="primary" title="Remember me">
        </div>
    </div>
    <div class="form-group">
        <div class="offset-sm-2 col-sm-10">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

<script src="../src/layui.js"></script>
<script>
    layui.use(['jquery', 'form'], function($, form){

    });
</script>
</body>
</html>